<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<script src="jquery1.42.min.js" type="text/javascript"></script>
		<style type="text/css">
			ul, ol { list-style: none; margin: 0; padding: 0; }
			ol { width: 1200px; height: 50px; margin: 0 auto; text-align: center; line-height: 50px; }
			ol li { display: inline-block; width: 50px; height: 50px; border-radius: 50%; background: #00FFFF; text-align: center; line-height: 50px; font-weight: bold; cursor: pointer; }
			ol li.on { background: #FFFF00; }
			ul {width: 1200px; height: 300px; }
			ul li { width: 1200px; height: 100px; text-align: center; line-height: 100px; font-size: 30px; font-weight: bold; color: #FFFFFF; }
			ul li:first-child { background: #999999; }
			ul li:first-child +li { background: #666666; }
			ul li:first-child +li +li { background: #333333; }
		</style>
	</head>
	<body>
		<div class="button">
			<ol>
				<li>OA</li>
				<li>OB</li>
				<li>OC</li>
			</ol>
		</div>
		<div style="width: 1200px; margin: 0 auto; height: 100px; overflow: hidden;">
			<ul class="main">
				<li>UA</li>
				<li>UB</li>
				<li>UC</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="JS.js"></script>
</html>